<script setup>
import { ref, onMounted } from "vue";
import { Loading } from "@element-plus/icons-vue";
import { throttle } from "@/utils";
import axios from "axios";
import { showToast } from "vant";
let elementRefs = ref([]);
let allListData = ref([]);
let twoData = ref([]);
let listData = ref([]);
let listBoxRef = ref(null);
let pageNo = ref(0);
let pageSize = ref(20);
let itemHeight = ref(40);
let loadEnd = ref(false);
let threshold = ref(20); // 设定一个触底阀值  小于这个值的时候就可以触底加载数据了
let refreshLoading = ref(false);

let loading = ref(false);

onMounted(() => {
  init();
});
const init = async () => {
  const { data } = await axios.get("/api/getList");
  allListData.value = data.data;
  twoData.value = avgFn(allListData.value, pageSize.value);
  scroll();
};

const onRefresh = () => {
  pageNo.value = 0;
  twoData.value = avgFn(allListData.value, pageSize.value);
  scroll();
  setTimeout(() => {
    showToast("刷新成功");
  refreshLoading.value = false
  }, 1000)
};

const avgFn = (data, pageSize) => {
  let i = 0,
    result = [];
  while (i < data.length) {
    result.push(data.slice(i, i + pageSize));
    i = i + pageSize;
  }
  return result;
};

const scroll = throttle(() => {
  if (pageNo.value >= twoData.value.length) {
    loadEnd.value = true;
    return;
  }
  let { scrollTop, offsetHeight } = listBoxRef.value;
  let listHeight = itemHeight.value * listData.value.length;
  if (listHeight - offsetHeight <= scrollTop + threshold.value) {
    loading.value = true;
    // setTimeout(() => { // 模拟加载过程 动画
    let data = twoData.value[pageNo.value];
    listData.value = listData.value.concat(data);

    loading.value = false;
    // }, 100);
  }
  pageNo.value++;
}, 200);
</script>

<template>
  <div class="box">
    <div class="listBox" @scroll="scroll" ref="listBoxRef">
      <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
        <div
          :style="{ height: itemHeight + 'px' }"
          class="listItem"
          v-for="(item, index) in listData"
          :key="index"
          :ref="elementRefs[index]"
        >
          <img :alt="item.imgSrc" />{{ item.name }}
        </div>
      </van-pull-refresh>
      <div v-if="loading" class="loadingBox">
        <el-icon class="is-loading">
          <Loading />
        </el-icon>
      </div>
      <div class="loadText" v-if="loadEnd">数据已经到底了</div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.box {
  width: 300px;
  height: 600px;
  position: relative;
}
.listBox {
  width: 300px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  height: 600px;
  overflow-y: auto;
  .listItem {
    width: 100%;
    color: #fff;
    text-align: center;
    line-height: 40px;
    &:nth-child(even) {
      background: firebrick;
    }
    &:nth-child(odd) {
      background: darkolivegreen;
    }
    img {
      height: 40px;
      float: left;
    }
  }
  .loadingBox {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background: #409eff;
    color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .loadText {
    text-align: center;
    line-height: 40px;
  }
}
</style>
